<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>

	<link rel="stylesheet" href="./colorPick.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		h1 {
			background-color: hsla(182, 44%, 76%, .5)
		}

		.rwly-color-picker{
			display: inline-block;
			/* margin-left: 300px; */
			margin: 120px;
		}
	</style>
</head>

<body>
	<h1>test 输出颜色</h1>

	<div id="color_picker_box1"></div>
	<div id="color_picker_box2"></div>
	<div id="color_picker_box3"></div>
	<P>1.triggerEl(toggle显示和隐藏盒子ID) 2.el(容器ID) 3.default(默认颜色)#3598DB,#F5A623,#5991FF UI提供的八个样式 4.//color(确认后返回的颜色)</P>
	
	<script src="./colorPick.js"></script>
	<script type="text/javascript">
		//    
		var oo = new oColorpiker({
			//triggerEl(toggle显示和隐藏盒子ID))
			triggerEl: '#show-color-box',
			//el(容器ID)
			el: '#color_picker_box1',
			//default(默认颜色)#3598DB,#F5A623,#5991FF UI提供的八个样式
			default: '#3598DB',
			//color(确认后返回的颜色)
			onChange: function (color) {
				//...  取到颜色
				console.log(color)
			}
		});

		var kk = new oColorpiker({
			triggerEl: '#show-color-box1',
			el: '#color_picker_box2',
			default: '#F5A623',
			onChange: function (color) {
				//...  点击取确认按钮取到颜色
				console.log(color)
			}
		});
		var kkk = new oColorpiker({
			triggerEl: '#show-color-box3',
			el: '#color_picker_box3',
			default: '#5856D6',
			onChange: function (color) {
				//...  点击取确认按钮取到颜色
				console.log(color)
			}
		});

	</script>
</body>

</html>